<%@ page import="com.wanshi.utils.Constants" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html  style="background:linear-gradient(to bottom,#fff, #ddd,#fff)">
<head>
    <title>Title</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .page a{
            width: 50px;
            height: 40px;
            margin: 0px 5px;

            display: inline-block;
            line-height: 40px;
            text-align: center;
            background-color: orangered;
            border-radius: 10px;
            color: white;
            text-decoration: none;
        }

        .page a:hover{
            background-color: aquamarine;
        }
        .fen{
            color: red;
        }

        .scorep{
            font-family: "楷体";
            font-size: 16px;
            line-height: 40px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body style="padding: 20px">



<p class="page"  style="text-align: center;margin-top: 15px;">
    <c:forEach items="${list}" var="clsname">
        <a href="javascript:;" onclick="getScore('${clsname}',this)">${clsname}</a>
    </c:forEach>
</p>

<div id="clsp"></div>
</body>

<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>

<script>
    function getScore(clsname,obj){
        $(obj).css("background-color","aquamarine").siblings().css("background-color","orangered");
        $.post("${pageContext.request.contextPath}/dati/getScoreListOfClsAjax",{"clsname":clsname},
        function (result) {
            if(result.code == 1){
                $("#clsp").html("");
                var arr = result.list;
                for(var i = 0;i<arr.length;i++){
                    var user = arr[i];
                    $("#clsp").append('<p class="scorep">'+(i+1)+'.&nbsp;&nbsp;'+user.username+'&nbsp;&nbsp;&nbsp;&nbsp;<span class="fen">'+user.score+'</span></p>');
                }
            }
        },"json");
    }


</script>
</html>
